<template>
  <view class="content">
    <view class="list">
      <view class="item" v-for="(item, index) in data.list" :key="index">
        <view class="num">{{ item.name }}</view>
        <view class="btn" @click="todel(item.id)">
          <view class="btn_item">查看详情</view>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="bnt" @click="add">添加桌子</view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { err, toast, to } from '@/utils/uniapi';
import { api } from '@/api/mop_api';
const data = reactive({
  list: [],
  page: 1,
  size: 20,
  pageTotal: 0
});
onLoad(() => {
  data.list=[]
  boaed();
});
async function boaed() {
  try {
    const { page, size, list } = data;
    const res = await api.board_list({ page, size });
    const { respCode, source, pageTotal, msg } = res;
    if (respCode === 200) {
      const newlist = JSON.parse(source);
      data.pageTotal = pageTotal;
      data.list = list.length === 0 ? newlist : list.concat(newlist);
    } else {
      toast(msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
function todel(e: any) {
  to('/dj/delboard/delboard?id=' + e);
}
function add() {
  to('/dj/addboard/addboard');
}
onReachBottom(() => {
  const { list, pageTotal, page } = data;
  if (list.length < pageTotal) {
    data.page = page + 1;
    boaed();
  } else {
    toast('已加载全部数据');
  }
});
</script>

<style scoped>
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 80rpx;
}
.item {
  width: 320rpx;
  height: 200rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx -2rpx rgba(0, 0, 0, 0.06), 0rpx 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1);
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  margin: 20rpx 0;
  margin-left: 37.5rpx;
  padding: 20rpx;
  box-sizing: border-box;
}
.num {
  font-size: 50rpx;
  text-align: center;
  font-weight: bold;
}
.btn {
  margin-top: 30rpx;
  line-height: 40rpx;
  display: flex;
  justify-content: space-around;
}
.btn_item {
  border-radius: 20rpx;
  border: 1rpx solid #000;
  padding: 5rpx;
}
.bnt {
  width: 652rpx;
  height: 80rpx;
  background: #e30514;
  border-radius: 56rpx 56rpx 56rpx 56rpx;
  margin: 0 auto;
  font-size: 32rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 80rpx;
}
</style>
